---
title: "Color Field"
description: A text input for specifying color values, supporting formats like HEX, RGB, and HSL for precise color selection.
order: 2
published: true
references: ["https://react-spectrum.adobe.com/react-aria/ColorField.html"]
---

## Basic
A color field allows users to adjust a hex color or manipulate individual color channels.
<How toUse="colors/color-field/color-field-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/color-field
```

## Composed components
<Composed components={['field', 'color-swatch', 'color-picker']}/>

## Manual installation
```bash
npm i react-aria-components
```
<SourceCode toShow='color-field'/>

## Anatomy
```
import { ColorField } from "@/components/ui/color-field"
import { Label, Description } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
```
```
<ColorField>
  <Label/>
  <Input/>
  <Description/>
</ColorField>
```

## Prefix
A color field can include a prefix to provide context or functionality.
<How toUse="colors/color-field/color-field-with-prefix-demo" />

## Suffix
A color field can also have a suffix.
<How toUse="colors/color-field/color-field-with-suffix-demo" />

## Controlled
Manage the color field in a controlled manner to automatically update the [ColorSwatch](/docs/components/colors/color-swatch) and display the current color.
<How toUse="colors/color-field/color-field-controlled-demo" />


## Disabled
You can disable the color field, making it non-interactive.
<How toUse="colors/color-field/color-field-disabled-demo" />

## Validation
In this example, we’ll ensure it’s treated as a strict requirement.
<How toUse="colors/color-field/color-field-validation-demo" />
